{% extends 'base.html' %}

{% block title %}{{ title }} - 数据可视化{% endblock %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block breadcrumb_active %}{{ breadcrumb_active }}{% endblock %}

{% block content %}
    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">重庆主城区二手房在售数量前二十区域</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="salesChart" style="min-height: 250px; height: 350px; max-height: 400px; max-width: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">重庆主城区二手房均价前二十区域</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="categoryChart" style="min-height: 200px; height: 200px; max-height: 250px; max-width: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">热门区域二手房价格分布</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="chart">
                                <canvas id="userGrowthChart" style="min-height: 200px; height: 200px; max-height: 250px; max-width: 100%;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block extra_js %}
<script>
    // 1. 重庆主城区二手房在售数量前二十区域
    var salesCtx = document.getElementById('salesChart').getContext('2d');
    var salesChart = new Chart(salesCtx, {
        type: 'bar',
        data: {
            labels: ['渝北区', '江北区', '南岸区', '九龙坡区', '沙坪坝区', '渝中区', '巴南区', '北碚区', '大渡口区', '高新区', '北部新区', '两江新区', '经开区', '茶园新区', '龙洲湾', '西永', '大学城', '照母山', '礼嘉', '中央公园'],
            datasets: [
                {
                    label: '在售房源数量',
                    data: [1850, 1620, 1480, 1350, 1290, 1250, 1050, 980, 850, 780, 720, 680, 620, 590, 560, 520, 480, 450, 420, 390],
                    backgroundColor: 'rgba(255, 99, 132, 0.7)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '重庆主城区二手房在售数量前二十区域'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '数量（套）'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '区域'
                    },
                    ticks: {
                        autoSkip: false,
                        maxRotation: 45,
                        minRotation: 45
                    }
                }
            }
        }
    });

    // 2. 重庆主城区二手房均价前二十区域
    var categoryCtx = document.getElementById('categoryChart').getContext('2d');
    var categoryChart = new Chart(categoryCtx, {
        type: 'bar',
        data: {
            labels: ['渝中区', '江北区', '渝北区', '南岸区', '九龙坡区', '沙坪坝区', '高新区', '北部新区', '两江新区', '经开区', '茶园新区', '龙洲湾', '西永', '大学城', '照母山', '礼嘉', '中央公园', '巴南区', '北碚区', '大渡口区'],
            datasets: [{
                label: '均价（万元/平方米）',
                data: [2.8, 2.5, 2.3, 2.1, 2.0, 1.9, 1.8, 1.7, 1.6, 1.5, 1.4, 1.3, 1.3, 1.2, 1.2, 1.1, 1.1, 1.0, 0.9, 0.9],
                backgroundColor: 'rgba(54, 162, 235, 0.7)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: '重庆主城区二手房均价前二十区域'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '均价（万元/平方米）'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: '区域'
                    },
                    ticks: {
                        autoSkip: false,
                        maxRotation: 45,
                        minRotation: 45
                    }
                }
            }
        }
    });

    // 3. 热门区域二手房价格分布（使用柱状图替代箱线图）
    var userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
    
    // 热门区域的数据
    var districts = ['渝北区', '江北区', '南岸区', '九龙坡区', '沙坪坝区', '渝中区'];
    
    // 各区域的价格分布数据（最小值, 均值, 最大值）
    var minPrices = [80, 90, 70, 60, 50, 120];
    var avgPrices = [180, 220, 170, 150, 140, 300];
    var maxPrices = [450, 500, 400, 350, 320, 800];
    
    var userGrowthChart = new Chart(userGrowthCtx, {
        type: 'bar',
        data: {
            labels: districts,
            datasets: [
                {
                    label: '最低价格（万元）',
                    data: minPrices,
                    backgroundColor: 'rgba(255, 99, 132, 0.7)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                },
                {
                    label: '平均价格（万元）',
                    data: avgPrices,
                    backgroundColor: 'rgba(54, 162, 235, 0.7)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                },
                {
                    label: '最高价格（万元）',
                    data: maxPrices,
                    backgroundColor: 'rgba(75, 192, 192, 0.7)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: true,
                    position: 'top'
                },
                title: {
                    display: true,
                    text: '热门区域二手房价格分布',
                    font: {
                        size: 16
                    }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            var label = context.dataset.label || '';
                            if (label) {
                                label += ': ';
                            }
                            if (context.parsed !== null) {
                                label += context.parsed.y + ' 万元';
                            }
                            return label;
                        }
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    title: {
                        display: true,
                        text: '总价（万元）'
                    },
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    },
                    title: {
                        display: true,
                        text: '热门区域'
                    }
                }
            }
        }
    });
</script>
{% endblock %}